<template>
  <div>
    <x-header v-show="isShowHeader()">
      <div slot="default" class="common__header--title">投保成功</div>
      <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
    </x-header>
    <x-dialog v-model="isShowFollow" class="dialog-Einv" hide-on-blur>
      <!-- <div v-show="isShowFollow"> -->
      <!-- 关注遮罩 -->
      <div class="insuresuccess_mask" @click="twinkles(4)"></div>
      <!-- 关注界面 -->
      <transition name="slide-fade">
        <div v-show="twinkleFollow" class="insuresuccess_follow">
          <div style="margin-bottom: 10px;">关注恒华出行宝，获取更多便捷服务</div>
          <div>
            <span style="border-right: 1px solid gray;" @click="closeFollow">取消</span>
            <span @click="goFollow">关注</span>
          </div>
        </div>
      </transition>
      <!-- </div> -->
    </x-dialog>
    <div class="insuresuccess--img">
      <img src="~assets/x3/ico/toubaochenggongimage@2x.png">
      <div>
        <span>投保成功!</span>
      </div>
    </div>
    <div class="insuresuccess_list policy_success_font14 insuresuccess_mt5">
      <div class="insuresuccess_list--title">投保单号: </div>
      <div class="insuresuccess_list--content">{{proposalNo}}</div>
    </div>
    <div class="insuresuccess_list policy_success_font14">
      <div class="insuresuccess_list--title">保&nbsp;单&nbsp;号&nbsp;: </div>
      <div class="insuresuccess_list--content">{{policyNo}}</div>
    </div>
    <group>
      <cell @click.native="downloadPolicy" v-show="isLoadPolicy" :border-intent="false" is-link>
        <img slot="icon" src="~assets/x3/ico/tbcg_down_dzbd.png" class="insuresuccess_list--img">
        <span slot="after-title" class="policy_success_font14">下载电子保单</span>
      </cell>
      <!-- <cell v-if="false" @click.native="getClause()" :border-intent="false" is-link>
                <img slot="icon" src="~assets/x3/ico/tbcg_down_tk.png" class="insuresuccess_list--img">
                <span slot="after-title" class="policy_success_font14">下载条款</span>
              </cell> -->
      <cell @click.native="queryEinv()" v-show="isLoadEinv" :border-intent="false" is-link>
        <img slot="icon" src="~assets/x3/ico/tbcg_kjfp.png" class="insuresuccess_list--img">
        <span slot="after-title" class="policy_success_font14">开具发票</span>
      </cell>
    </group>

    <x-dialog v-model="order.showPolicyEmail" class="dialog-Einv" hide-on-blur>
      <send-Email></send-Email>
    </x-dialog>
  </div>
</template>

<script>
import SendEmail from "src/components/SendEmail";
import { RequestUrl } from "src/common/url";
import { RouteUrl, Mutations } from "src/common/const";
import { XHeader, Group, Cell, XDialog } from "vux";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    XHeader,
    Group,
    Cell,
    XDialog,
    SendEmail
  },
  computed: mapState(["order", "user", "isWeChar"]),
  data() {
    return {
      proposalNo: "",
      policyNo: "",
      orderData: {},
      isShowFollow: false,//默认不显示关注界面
      twinkleFollow: true,//默认不闪烁关注界面
      isLoadPolicy: true,
      isLoadEinv: true,
    };
  },
  methods: {
    isShowHeader() {
      let ua = window.navigator.userAgent.toLowerCase();
      // if (ua.match(/MicroMessenger/i) != 'micromessenger') {
      //     return;
      // }

      if (this.isWeChar && ua.match(/MicroMessenger/i) != 'micromessenger') {
        return false;
      } else {
        return true;
      }
    },
    goBack() {
      if (localStorage["IS_SHOP_DETAIL"] == "T") {
        this.$common.goBackUrl(this, RouteUrl.SHOP_INDEX);
      } else if (localStorage["IS_SHOP_DETAIL"] == "O") {
        this.$common.goBackUrl(this, RouteUrl.ORDER);
        // this.$common.goUrl(this, RouteUrl.MY);
      } else {
        this.$common.goBackUrl(this, RouteUrl.INSURANCE);
      }
    },
    downloadPolicy() {
      let email = "";
      if (this.user.isLogin && typeof (this.user.email) != "undefined") {
        email = this.user.email
      }
      let downPolicyQueryData = {
        TYPE: "FORM",
        policyNo: this.orderData.policyNo,
        proposalDate: this.orderData.createTime,
        emailStr: email,
        applicantName: this.orderData.applicantName,
        showPolicyEmail: true,
      };

      this.$common.storeCommit(this, Mutations.SEND_POLICY_EMIAL, downPolicyQueryData);
      // this.$common.goUrl(this, RouteUrl.POLICY_INQUIRY);
    },
    queryEinv() {
      let data = {
        _this: this,
        order: this.orderData
      };
      this.$common.storeCommit(this, Mutations.ORDER_QUERY_EINV, data);
    },
    // getClause() {
    //   this.$common.downloadfile(this.orderData.clauseUrl);
    // }
    //闪烁关注界面，提示客户关注微信公众号
    twinkles(times) {
      let _this = this;
      if (times > 0) {
        setTimeout(() => {
          this.twinkleFollow = !this.twinkleFollow;
          times--;
          _this.twinkles(times);
        }, times * 50);
      }
    },
    closeFollow() {
      this.isShowFollow = false;
    },
    //跳转到关注页面
    goFollow() {
      window.location.href = RequestUrl.WE_CHAT_FOLLOW_PUBLIC_NUMBER;
    },
  },
  mounted() {
    document.title = '投保成功';
    let _this = this;

    let QueryPayMentRequestDto = {
      documentNo: ""
    };

    this.$http.post(RequestUrl.PAY_INFO_FIND, QueryPayMentRequestDto).then(function (res) {
      if ((res.success = true)) {
        _this.orderData = res.result[0];
        let result = res.result;
        for (let i = 0; i < result.length; i++) {
          if (i != result.length - 1) {
            _this.proposalNo = _this.proposalNo + result[i].proposalNo + ",";
            _this.policyNo = _this.policyNo + result[i].policyNo + ",";
          } else {
            _this.proposalNo = _this.proposalNo + result[i].proposalNo;
            _this.policyNo = _this.policyNo + result[i].policyNo;
          }
        }
        if (_this.orderData.insurancePolicyStatus == "1") {
          _this.isLoadPolicy = true;
        } else {
          _this.isLoadPolicy = false;
        }
        if (_this.orderData.invoiceStatus == "1") {
          _this.isLoadEinv = true;
        } else {
          _this.isLoadEinv = false;
        }
        // let proposalNo = _this.orderData.proposalNo;
        //车险禁止下载电子保单 只有北京可以下载
        // if (proposalNo.substring(2, 4) == "05") {
        //   _this.isLoadPolicy = false;
        //   if (proposalNo.substring(6, 8) == "11") {
        //     _this.isLoadPolicy = true;
        //   }
        // }
        if (_this.$common.isNotEmpty(_this.orderData.remark)) {
          _this.$vux.alert.show({ content: _this.$common.alertMsg(_this.orderData.remark, "red;") });
        }

        if (_this.orderData.user.wxSubscribe == '1') {
          _this.isShowFollow = false;//已关注用户无需提示
        } else {
          //微信端
          let ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            _this.isShowFollow = true;//显示关注界面
          }
        }
      }
    });
    // let _this = this;
    // this.$init.subPageInitFooter(this);
  }
};
</script>

<style lang="scss">
.insuresuccess_mask {
  // width: 100%;
  // height: 100%;
  // // background: red;
  // // position: absolute;
  // z-index: 1;
}
.insuresuccess_follow {
  margin-top: 15px;
  // width: 60%;
  height: 70px;
  padding: 0px 2%;
  line-height: 25px;
  text-align: center;
  font-size: 16px;
  color: black;
  background: rgba(255, 255, 255, 0.7);
  // position: absolute;
  z-index: 2;
  left: 20%;
  span {
    display: block;
    width: 49%;
    float: left;
    text-align: center;
    color: #c8161d;
    font-size: 16px;
    font-weight: bold;
  }
}

.insuresuccess--img {
  background-color: #c8161d;
  width: 100%;
  height: 50%;
  img {
    display: block;
    margin: 0px auto;
    width: 30%;
    padding-top: 25px;
  }
  div {
    text-align: center;
    padding-bottom: 50px;
  }
  span {
    padding: 5px 10px;
    height: 30px;
    max-width: 80%;
    line-height: 30px;
    margin: 0px auto;
    border: 1px solid white;
    border-radius: 4px;
    text-align: center;
    color: white;
  }
}

.insuresuccess_list {
  // display: inline-flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #ffffff;
  border-bottom: 1px solid #dfdfdf;
}

.insuresuccess_mt5 {
  margin-top: -5px;
}

.insuresuccess_list--title {
  float: left;
  padding-left: 25px;
  width: 65px;
  text-align: right;
}

.insuresuccess_list--content {
  float: left;
  margin-left: 2px;
}

.insuresuccess_list--img {
  width: 20px;
  margin-top: 6px;
  margin-left: 10px;
  margin-right: 5px;
}

.policy_success_font14 {
  font-size: 14px;
}
</style>
